﻿Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);
Ext.onReady(function () {
    var chart = Ext.create('Ext.chart.Chart', {
        id: 'myChart',
        width: 1200,
        height: 530,
        style: 'background:#fff',
        animate: true,
        store: store1,
        renderTo: curveDiv,
        shadow: true,//赋予线条阴影效果
        theme: 'Category1',
        legend: {
            position: 'right'
        },
        axes: [{
            type: 'Numeric',
            minimum: 0,
            grid: true,
            position: 'left',
            fields: ['Daily_Water_Time', 'Daily_Schedule', 'Daily_Actual'],
            title: '吨',
            minorTickSteps: 10,
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 1
                }
            }
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: '天数'
        }],
        series: [{
            type: 'line',//说明这里是折线图
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            fill: false,
            smooth: true,
            xField: 'name',
            yField: 'Daily_Water_Time',
            title: '日注水时间',
            tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function (storeItem, item) {
                    this.setTitle('第' + storeItem.get('name') + '天注水：' + storeItem.get('Daily_Water_Time') + '小时');
                }
            },
            style: { 'foreground-color': 'yellow' },
            markerConfig: {
                type: 'circle',//关键转折点的类型
                size: 4,
                radius: 4,
                'stroke-width': 0
            }
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
            xField: 'name',
            yField: 'Daily_Schedule',
            title: '日计划注水',
            tips: {
                trackMouse: true,
                width: 160,
                height: 28,
                renderer: function (storeItem, item) {
                    this.setTitle('第' + storeItem.get('name') + '天计划注水：' + storeItem.get('Daily_Schedule') + '吨');
                }
            },
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            }
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
            xField: 'name',
            yField: 'Daily_Actual',
            title: '日实际注水',
            tips: {
                trackMouse: true,
                width: 160,
                height: 28,
                renderer: function (storeItem, item) {
                    this.setTitle('第' + storeItem.get('name') + '天实际注水：' + storeItem.get('Daily_Actual') + '吨');
                }
            },
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            }
        }]
    });

});
